<template>
  <div class="swiper-container vue-swiper" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(x, index) in list" :key="index">
        <img :src="x" :alt="x.alt || 'img'+index">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" ref="pagination"></div>
  </div>
</template>

<script type="text/ecmascript-6">
import Swiper from '../../styles/style/swiper/swiper-3.4.2.min'
import _ from 'lodash'

var myswiper = null

export default {
	props: {
		list: {
			type: Array,
			required: true,
			default: function() {
				return []
			},
		},
		config: {
			type: Object,
			default: function() {
				return {
					autoplay: 3000,
					observer: true,
					observeParents: true,
					autoplayDisableOnInteraction: false,
				}
			},
		},
	},
	data() {
		return {}
	},
	mounted() {
		myswiper = new Swiper(
			this.$refs.swiper,
			_.assign(
				{
					pagination: this.$refs.pagination,
				},
				this.config,
			),
		)
	},
	watch: {
		list(newval, oldVal) {
			setTimeout(function() {
				myswiper.update()
			}, 10)
		},
	},
}
</script>

<style type="text/css">
@import '../../styles/style/swiper/swiper-3.4.2.min.css';
.swiper-container img {
	width: 100%;
	height: 14rem;
}

.vue-swiper .swiper-pagination-bullet {
	background-color: #fff;
}
.vue-swiper .swiper-pagination-white .swiper-pagination-bullet-active {
	background-color: #fff;
}
</style>
